import { useState } from "react";
import { Search, ChevronDown, MoreHorizontal } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

export function UserTab({ users, searchQuery, setSearchQuery, onEditUser }) {
  return (
    <Card>
      <CardHeader>
        <div className='flex justify-between items-center'>
          <CardTitle>用户权限</CardTitle>
          <div className='flex gap-2'>
            <div className='relative'>
              <Search className='absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground' />
              <Input
                placeholder='搜索用户...'
                className='pl-8 w-64'
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>用户</TableHead>
              <TableHead>角色</TableHead>
              <TableHead>权限</TableHead>
              <TableHead>最后活动时间</TableHead>
              <TableHead></TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {users.map((user) => (
              <TableRow key={user.id}>
                <TableCell className='font-medium'>
                  <div>
                    <div>{user.name}</div>
                    <div className='text-sm text-muted-foreground'>
                      {user.email}
                    </div>
                  </div>
                </TableCell>
                <TableCell>
                  <Badge
                    variant={
                      user.role === "管理员"
                        ? "default"
                        : user.role === "编辑者"
                        ? "outline"
                        : "secondary"
                    }
                  >
                    {user.role}
                  </Badge>
                </TableCell>
                <TableCell>
                  <div className='flex gap-2'>
                    {user.permissions.view && (
                      <Badge
                        variant='outline'
                        className='bg-green-50 text-green-700 border-green-200'
                      >
                        查看
                      </Badge>
                    )}
                    {user.permissions.edit && (
                      <Badge
                        variant='outline'
                        className='bg-blue-50 text-blue-700 border-blue-200'
                      >
                        编辑
                      </Badge>
                    )}
                    {user.permissions.delete && (
                      <Badge
                        variant='outline'
                        className='bg-red-50 text-red-700 border-red-200'
                      >
                        删除
                      </Badge>
                    )}
                    {user.permissions.share && (
                      <Badge
                        variant='outline'
                        className='bg-purple-50 text-purple-700 border-purple-200'
                      >
                        分享
                      </Badge>
                    )}
                  </div>
                </TableCell>
                <TableCell>
                  {new Date(user.lastActive).toLocaleString("zh-CN")}
                </TableCell>
                <TableCell>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant='ghost' size='icon'>
                        <MoreHorizontal className='h-4 w-4' />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align='end'>
                      <DropdownMenuLabel>操作</DropdownMenuLabel>
                      <DropdownMenuItem onClick={() => onEditUser(user)}>
                        编辑权限
                      </DropdownMenuItem>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem className='text-red-600'>
                        移除用户
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
}
